﻿@model SchoolCommunicationSystem.Models.LearnerListViewModels
@{
    ViewBag.Title = "Danh sách học sinh";
}

@Scripts.Render("~/bundles/tablesorter")
@Scripts.Render("~/bundles/tablesorterpaging")
@*@Scripts.Render("~/bundles/jquerymin")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/Content/themes/base/css")*@
@if (Model.Learners.Count() > 0)
{
    <script type="text/javascript">
        $(function () {

            $("table")
                .tablesorter({
                    widthFixed: true, widgets: ['zebra'], headers: { 8: { sorter: false } }
                })
                .tablesorterPager({ container: $("#pagersorter") });
        });
    </script>
}
<script type="text/javascript">
    $(document).ready(function () {

        $("#CreateCustomer").live("click", function (e) {
            // e.preventDefault(); use this or return false
            var url = $(this).attr('href');
            $("#dialog-edit").dialog({
                title: 'Tạo học sinh',
                autoOpen: false,
                resizable: false,
                height: 600,
                width: 600,
                modal: true,
                draggable: true,
                open: function (event, ui) {
                    $(this).load(url);

                },
                close: function (event, ui) {
                    $(this).dialog('close');
                }
            });

            $("#dialog-edit").dialog('open');
            return false;
        });

        $(".editDialog").live("click", function (e) {
            // e.preventDefault(); use this or return false
            var url = $(this).attr('href');
            $("#dialog-edit").dialog({
                title: 'Sửa thông tin học sinh',
                autoOpen: false,
                resizable: false,
                height: 550,
                width: 420,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                open: function (event, ui) {
                    $(this).load(url);

                },
                close: function (event, ui) {
                    $(this).dialog('close');
                }
            });

            $("#dialog-edit").dialog('open');
            return false;
        });

        $(".confirmDialog").live("click", function (e) {

            // e.preventDefault(); use this or return false
            var url = $(this).attr('href');

            $("#dialog-confirm").dialog({
                autoOpen: false,
                resizable: false,
                height: 170,
                width: 350,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                        window.location = url;

                    },
                    "Cancel": function () {
                        $(this).dialog("close");

                    }
                }
            });
            $("#dialog-confirm").dialog('open');
            return false;
        });

        $(".viewDialog").live("click", function (e) {
            // e.preventDefault(); use this or return false
            var url = $(this).attr('href');
            $("#dialog-view").dialog({
                title: 'View Customer',
                autoOpen: false,
                resizable: false,
                height: 250,
                width: 400,
                show: { effect: 'drop', direction: "up" },
                modal: true,
                draggable: true,
                open: function (event, ui) {
                    $(this).load(url);

                },
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");

                    }
                },
                close: function (event, ui) {
                    $(this).dialog('close');
                }
            });

            $("#dialog-view").dialog('open');
            return false;
        });

        $("#btncancel").live("click", function (e) {
            // location.reload(true);
            $("#dialog-edit").dialog('close');

        });
    });
</script>
<div id="page-heading">
    <h1>Quản lý học sinh</h1>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h4>Danh sách học sinh</h4>
                </div>
                <div class="panel-body">
                    <div class="module_contentwithsearch">


                        @using (Html.BeginForm("WebGrid", "Learner", FormMethod.Post, new { @class = "form-horizontal" }))
                        { <div class="form-group" style="margin-bottom: 0px;">
                            @Html.Label("Lớp", new { @class = "col-sm-1", @style = "width: 5%;" })
                            <div class="col-sm-1">
                                @Html.DropDownListFor(m => m.ClassID, Model.ClassSelectList, "",new { @class = "form-control",@style="height:26px;padding: 2px 5px 2px 2px;"})
                            </div>
                            @Html.Label("Họ Tên", new { @class = "col-sm-2", @style = "width: 7%;" })
                            <div class="col-sm-2">
                                @Html.TextBox("searchString")
                            </div>
                            <div class="col-sm-2" style="width: 12%;">
                                <button class="btn-primary btn searchbtn btn-sm" type="submit" style="padding: 4px 15px;">Tìm kiếm</button>
                            </div>
                            <div class="col-sm-1">
                                <a class="btn btn-success btn-sm" id="CreateCustomer" href="..\Learner\Create" style="padding: 4px 15px;">Tạo học sinh</a>
                            </div>
                        </div>
                        }
                    </div>
                    <div class="module_contentresult">
                        <br />
                        <table class="tablesorter">
                            <thead>
                                <tr>
                                      <th style="width:10%;">Mã học sinh</th>
                                    <th class="sortInitialOrder-desc" style="width:15%;">Họ đệm</th>
                                    <th class="sortInitialOrder-desc" style="width:8%;">Tên</th>
                                      <th style="width:10%;">Ngày sinh</th>
                                      <th style="width:8%;">Giới Tính</th>
                                      <th style="width:18%;">Nơi Sinh</th>
                                      <th style="width:17%;">Địa chỉ</th>
                                      <th style="width:20%;">Tên phụ huynh</th>
                                    <th style="text-align: center;width:3%;">Sửa</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var item in Model.Learners)
                                {
                                    <tr>
                                        <td>@item.learnerID</td>
                                        <td>@item.firstName</td>
                                        <td>@item.lastName</td>
                                        <td>@item.dateOfBirth.ToShortDateString()</td>
                                        @if (item.gender == "M")
                                        {
                                            <td>Nam</td>
                                        }
                                        else
                                        {
                                            <td>Nữ</td>
                                        }
                                        <td>@item.birthPlace</td>
                                        <td>@item.address</td>
                                        
                                        @if (item.parentID.HasValue)
                                        {
                                            <td>@item.Parent.parentName</td>
                                        }
                                        else
                                        {
                                            <td>@Html.ActionLink("Đăng ký SLLDT", "EditParent", new { id = item.learnerID })</td>
                                        }
                                        <td style="text-align: center; align-content: center;">
                                            <a class="editDialog" href="@Url.Action("Edit", "Learner", new { id = item.learnerID })"><i class="fa fa-pencil"></i></a>
                                        </td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                        <div id="pagersorter" class="pagersorter" style="clear: both;">
                            <form>
                                <img src="../../Content/images/first.png" class="first" />
                                <img src="../../Content/images/prev.png" class="prev" />
                                <input type="text" class="pagedisplay" />
                                <img src="../../Content/images/next.png" class="next" />
                                <img src="../../Content/images/last.png" class="last" />
                                <select class="pagesize">
                                    <option selected="selected" value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="30">30</option>
                                    <option value="40">40</option>
                                </select>
                            </form>
                        </div>


                        <br />

                        <div style="color: Green; font-weight: bold">
                            @TempData["msg"]
                        </div>
                        <div id="dialog-confirm" style="display: none">
                            <p>
                                <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
                                Bạn có muốn xóa ko ?
                            </p>
                        </div>
                        <div id="dialog-edit" style="display: none">
                        </div>
                        <div id="dialog-view" style="display: none">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
